<template>
  <div class="person">
    <h2>
      姓名：{{ student.name }}
      年龄：{{ student.age }}
    </h2>
    <button @click="sum1">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import {ref, reactive,watch, computed, toValue} from 'vue'

let student = ref({
  name : '李四',
  age : 18
})
//修改全量名称为ref类型数据
function sum1() {
 student.value = {name:'王八',age:99}
}

function changeAge(){
  student.value.age += 1;
}
//ref 为基本数据，新旧值为同一个， 为对象类型 新旧不同
stop = watch(student,(newVal,oldVal) => {
 console.log(newVal,oldVal);
},{deep:true})
//deep 为深度

console.log(stop);



</script>